<html>
<head>
	<link rel="stylesheet" type="text/css" href="./css/main/base.css" />
	<link rel="stylesheet" type="text/css" href="./css/main/cci_test.css" />
	<link rel="stylesheet" type="text/css" href="./css/plugin/ui.dynatree.css" />
	<link rel="stylesheet" type="text/css" href="./css/plugin/ui.panel.css" />
	<link rel="stylesheet" type="text/css" href="./css/plugin/jquery-ui-1.8.custom.css" />
	   
	<script type="text/javascript" src="./js/jquery/jquery.1.7.2.js"></script>
	<script type="text/javascript" src="./js/jquery/jquery-ui-1.8.7.custom.min.js"></script>
	<script type="text/javascript" src="./js/jquery/jquery.cookie.js"></script>
	<script type="text/javascript" src="./js/jquery/json2.js"></script>
	
	<script type="text/javascript" src="./js/plugin/jquery.dynatree.js"></script>
	<script type="text/javascript" src="./js/plugin/ui.panel.js"></script>
	
	<script type="text/javascript" src="./js/comm.js"></script>
	<script type="text/javascript" src="./js/cci.js"></script>
	<script type="text/javascript" src="./js/ccidata.js"></script>
	<script type="text/javascript" src="./js/ccisave.js"></script>	
	<style>
		html, body{
		    font-size: 10px;
		    font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
		    padding:0;
		    margin:5;
		}
		.box { margin: 1em }
		.navPanel { margin: 0 0.5em 0.5em 0.5em; }
                .centralPanel { margin-bottom: 1em; }
                .fakeLink{ color:navy; cursor:pointer; }
		#desktop { background-color:#eee;  padding-bottom:3em; color:#444; }
		#container{
		    margin:0; padding:0;
		}
		#lCenter{
		    padding:1em;
		    padding-top:0;
		    overflow:hidden;
		}
		#lLeft{
		    float: left;
		}
		#lRight{
		    float: right;
		}
	</style>

	<script type="text/javascript">
	    $(document).ready(
			function(){
				//cci.make("root1");
				//cci.make("root2");
				cci.makeList("topListDiv");
				cci.makeList("bottomListDiv");
				
				//cci.makeDynaTree("topTreeDiv");
				//cci.makeDynaTree("bottomTreeDiv");
				
			    $('#panelLeft_1').panel({
	                        collapseType:'slide-left',
	                        width:'300px'
	                    });
			    $('#panelLeft_2').panel({
	                        collapseType:'slide-left',
	                        trueVerticalText:true,
	                        vHeight:'150px',
	                        width:'300px'
	                    });
			    $('#panelRight_1').panel({
	                        collapseType:'slide-right',
	                        trueVerticalText:true,
	                        vHeight:'237px',
	                        width:'300px'
	                    });
			    $('#panelRight_2').panel({
	                        collapseType:'slide-right',
	                        trueVerticalText:true,
	                        vHeight:'160px',
	                        width:'300px'
	                    });
			    $('#panelCenter_1').panel({
	                        collapsible:true,
	                        height:'500px'
	                    });
	/*		    
	            $('#panelCenter_2').panel({
	                draggable:true,
	                cookie:{'expires':7}
	            });
	*/            
			}
	    );
	    
		function drag(ev) {
			ev.dataTransfer.setData("Text", ev.target.id);
			var data = ev.dataTransfer.getData("Text");
		}
		
		function drop(ev) {
			ev.preventDefault();
			var data = ev.dataTransfer.getData("Text");
			var type = $("#"+data).attr("type");
			var value = $("#"+data).attr("value");
			var id = ev.explicitOriginalTarget.parentElement.id;
			console.log(ev);
			var idNumber = id.split("_")[1];
			if(type == "groupbox") {
				var groupType = "";
				var parentId = id;
				if(id == "root2") {
					groupType = "group";
					parentId = id;
					$("#root2").text();
				}
				else {
					groupType = "subGroup";
					parentId = "parent_"+idNumber;
				}
				cci.addGroup(parentId, value, groupType);
				$("#ttt").text(parentId);
			}
			if(type == "groupmain") {
				cci.addEntity(idNumber, {name:"",restriction:"",value:""});
			}
		}
		
		function dropbox(ev) {
			var id = ev.target.id;
		}
		
		function permitdrop(ev) {
			ev.preventDefault();
		}	    
	</script>
</head>
<body>

<input type="hidden" id="idNumber" name="idNumber" value="0"/>
<input type="hidden" id="idNumber" name="idNumber2" value="0"/>

<div id="container">  
    <div id="lLeft">
    	<!-- Left 1 -->
		<div id="panelLeft_1" class="navPanel">
			<h3>CCI List</h3>
			<div id="topListDiv">
			</div>
		</div>
    	<!-- Left 2 -->
		<div id="panelLeft_2" class="navPanel">
			<h3>CCI List</h3>
			<div id="bottomListDiv">
			</div>			
		</div>
    </div> <!-- end lLeft -->
    
    
    <div id="lRight">
    	<!-- Right 1 -->
		<div id="panelRight_1" class="navPanel">
			<h3>Class List</h3>
			<div id="topTreeDiv" class="">
			</div>
		</div>
    	<!-- Right 2 -->
		<div id="panelRight_2" class="navPanel">
			<h3>Properties</h3>
			<div id="bottomTreeDiv" class="">
			</div>
		</div>
    </div> <!-- end lRight -->
    
    
    <div id="lCenter">
	    <div id="panelCenter_1" class="centralPanel">
			<h3>CCI</h3>
			<div id="root1" style="">
			</div>
		</div> <!-- end panelCenter_1 -->
		<div>
			<textarea style="width:100%;height:10%" id="ta"></textarea>
		</div>
		<div class="float_r mgt10 mgl10" id="btnDiv">
			<button onclick="ccisave.save('root2')">save</button>
			<button onclick="$('#ta').text('');" ondrop="dropbox(event);">remove</button>
		</div>
		<br>
	    <div>
			<div style="height:25">
				<span id="addIntergroup" value="IntersectionGroup" type="groupbox" class="draggable-div" draggable="true" ondragstart="drag(event)">Inter</span>
				<span id="addUniongroup" value="UnionGroup" type="groupbox" class="draggable-div" draggable="true" ondragstart="drag(event)">Union</span>
				<span id="addEntity" value="addEntity" type="groupmain" class="draggable-div" draggable="true" ondragstart="drag(event)">Entity</span>
			</div>
			<div id="panelCenter_2" class="">
				<h3>User-Defined CCi Case Information Description</h3>			
				<div id="root2" ondragover="permitdrop(event)" ondrop="drop(event);">make group area</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>
